<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="layout" content="wechat"/>
    <title>订单详情</title>
    <style>
    .workflow {
        position: relative;
        padding: 1rem 0;
    }

    .flowList {
        margin-left: 3rem;
    }

    .flowItem {
        height: 5rem;
        padding: 10px 10px;
        border-bottom: 1px solid #e0e3e8;
    }

    .flowItem h3 {
        font-size: 1.3rem;
        color: #AAA;
        margin-bottom: 0.4rem;
    }

    .flowItem h4 {
        font-size: 1rem;
        color: #AAA;
    }

    .siderSign {
        position: absolute;
        left: 1.2rem;
        top: 10px;
        z-index: 5;
    }

    .signList li {
        height: 5rem;
        line-height: 4.5rem;
    }

    .signList li:before {
        content: '';
        width: 0;
        border-left: 1px solid #B4AFAF;
        height: 5rem;
        display: inline-block;
        position: absolute;
        left: 8px;
        z-index: -1;
        margin-top: 2.5rem;
    }

    .signList li:last-child:before {
        height: 0;
    }

    .signList li span {
        display: inline-block;
        background: url('${resource(dir: "images", file: "icon-well.png")}') no-repeat;
        background-size: 100% 100%;
        width: 16px;
        height: 16px;
        border-radius: 50%;
    }

    .flowItem.active h3 {
        color: #000;
    }

    .flowItem.active h4 {
        color: #4A4A4A;
    }

    .flowItem.activeError h3, .flowItem.activeError h4 {
        color: #CD001A;
    }

    .signList li.active span {
        width: 24px;
        height: 24px;
        margin-left: -4px;
        background: url('${resource(dir: "images", file: "icon-yes.png")}') no-repeat;
        background-size: 100% 100%;
    }

    .signList li.activeError span {
        width: 24px;
        height: 24px;
        margin-left: -4px;
        background: url('${resource(dir: "images", file: "icon-no.png")}') no-repeat;
        background-size: 100% 100%;
    }

    .houseInfo {
        margin-top: 1.5rem;
    }

    .houseInfo h3 {
        font-size: 1.4rem;
    }

    .infoList {
        padding: .8rem 0;
        font-size: 1.2rem;
        color: #4A4A4A;
        background-color: #fff;
        position: relative;
    }

    .infoList li {
        padding: 0 1.2rem;
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    .infoList li:last-child {
        margin-bottom: 0;
        border-bottom: 1px solid #F0F0F1;
        padding-bottom: 4px;
    }

    .infoList li label {
        font-size: 1rem;
        color: #9B9B9B;
        margin-right: 1.2rem;
    }

    .infoList li span {
        font-size: 1.25rem;
        color: #4A4A4A;
    }

    .infoTitle {
        height: 3.5rem;
        line-height: 3.5rem;
        padding: 0 1.2rem;
        font-size: 1.4rem;
        color: #4A4A4A;
        background-color: #DEDEDE;
    }

    .infoList li.active {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: flex-start;
        -webkit-align-items: flex-start;
        -ms-flex-align: flex-start;
        align-items: flex-start;
    }

    .infoList li.active label {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }

    .infoList li.active span {
        -webkit-box-flex: 4;
        -webkit-flex: 4;
        -ms-flex: 4;
        flex: 4;
    }
    </style>
</head>

<body>
<div class="hide" id="stage">${this.opportunity.stage.code}</div>

<div class="hide" id="status">${this.opportunity.status}</div>
%{--<div class="hide" id="stage">07</div>--}%
%{--<div class="hide" id="status">Failed</div>--}%
<div class="container">
    <div class="bgcWhite workflow">
        <ul class="flowList">
            <li class="flowItem active">
                <h3 data-id="01">信息已填写</h3>
            </li>
            <li class="flowItem">
                <h3 data-id="02">贷款信息已提交</h3>
            </li>
            <li class="flowItem">
                <h3 data-id="03">等待受理</h3>
            </li>

        </ul>

        <div class="siderSign">
            <ul class="signList" id="signList">
                <li data-id="01" class="active"><span></span></li>
                <li data-id="02" class="active"><span></span></li>
                <li data-id="03"><span></span></li>

            </ul>
        </div>
    </div>

</div>

</body>
</html>
